<!-- 商城退货页面 -->
<template>
	<view class="refund">
		<!-- 标题 -->
		<view class="storeTitle" v-if="orderData.sellerInfo">
			<image :src="orderData.sellerInfo.online_logo" mode=""></image>
			<text class="title">{{orderData.sellerInfo.online_name}}</text>
			<text class="yticon icon-you"></text>
		</view>
		<!-- 商品列表 -->
		<view class="titleitem">
			<view class="items" v-for="(item, index) in orderData.orderGoods" :key="index">
				<view class="item">
					<!-- 图片 -->
					<view class="img">
						<image :src="item.cart_info.productInfo.image" mode=""></image>
					</view>
					<!-- 信息 -->
					<view class="msg">
						<text class="clamp">{{item.cart_info.productInfo.store_name}}</text>
						<view class="a">
							<text v-if="item.cart_info.productInfo.attrInfo">规格：{{item.cart_info.productInfo.attrInfo.suk||'无'}}</text>
							<text>× {{item.cart_info.cart_num}}</text>
						</view>
						<view class="b">
							<text></text>
							<view v-if="item.cart_info.productInfo.attrInfo"><text>￥</text><text>{{item.cart_info.productInfo.attrInfo.price}}</text></view>
							<view v-else><text>￥</text><text>{{item.cart_info.productInfo.price}}</text></view>
						</view>
					</view>
				</view>
				<view class="cell" style="margin-top: 20rpx;" v-if="type == 2||type == 3">
					<text class="tit">退货数量:</text>
					<uni-number-box class="uni-number-box" :min="1" :max="item.cart_info.cart_num" :value="1" @eventChange="numberChange($event,index)"></uni-number-box>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="cellBox">
				<view class="cell">
					<text class="tit">退款原因:</text>
					<input class="reson" disabled type="text" v-model="reson" placeholder="请先选择退款原因" @tap="chooseReson" />
					<text class="yticon icon-xia"></text>
				</view>
				<view class="cell">
					<textarea v-show="!popup" class="resonDel" v-model="resonDel" placeholder="请描述申请退货的具体原因" />
				</view>
				<view class="img-box-upload" v-if="type == 2||type == 3">
						<img-upload :serverUrl="serverUrl" @complete="result($event)" @remove="remove"></img-upload>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="cellBox">
				<view class="cell">
					<text class="tit">退款联系人:</text>
					<input class="reson" type="text" v-model="contactName" placeholder="请输入联系人姓名" />
				</view>
				<view class="cell">
					<text class="tit">联系电话:</text>
					<input class="reson" type="number" v-model="contactPhone" placeholder="请输入联系人电话" />
				</view>
				<text class="notice">提交申请后，售后专员可能与您电话沟通，请保持手机畅通</text>
			</view>
		</view>
		<view class="btnWrapper">
			<view class="rule">
				<image @tap="ruleCheck" v-if="ruleChecked" src="../../static/images/selected.png" mode=""></image>
				<view @tap="ruleCheck" class="gray" v-else></view>
				<view class="text"><text>同意</text><text @tap="goRule(23,'国家普惠社区退货规则')">《国家普惠社区退货规则》</text></view>
			</view>
			<view class="btn" @tap="submit">提交申请</view>
		</view>
		<!-- 原因选择弹层 -->
		<uni-popup ref="popup" type="center">
			<view class="sellerType">
				<image @tap="close" class="close" src="../../../static/images/center/close.png" mode=""></image>
				<text class="title">
					选择退款原因
				</text>
				<view class="radioBox">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in resonArr" :key="index">
							<view>
								<text>{{item}}</text>
							</view>
							<view>
								<radio color="#FF1F2F" style="transform:scale(0.7)" :value="item"/>
							</view>
						</label>
					</radio-group>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		refundReason,
		orderReturn,
		returnApply
	} from "@/api/mall.js"
	import imgUpload from '@/components/img-upload/img-upload.vue'
	import { baseUrl } from '@/api/api.js'
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
	export default {
		components: {
			imgUpload,
			uniNumberBox
		},
		data() {
			return {
				popup: false,
				ruleChecked: true,
				oid: '',
				rid: '',
				cart_id_arr: [],
				type: 0,
				orderData: {},
				reson:'',
				resonArr: [],
				resonDel: '',
				data: [],
				serverUrl: baseUrl() + '/upload/image',
				pics: [],
				contactName: '',
				contactPhone: '',
			};
		},
		onLoad(option) {
			this.oid = option.oid
			this.type = option.type
			this.rid = option.rid
			if (option.pid) {
				this.cart_id_arr = option.pid.split(",")
			}
			orderReturn({
				oid:this.oid,
				product: this.cart_id_arr
			}).then(res => {
				this.orderData = res.data
				this.orderData.orderGoods.forEach((item,index) => {
					if (this.type != 1) {
						this.data.push({
							cart_id: item.cart_id,
							product_num: 1,
						})
					}
				})
				
			})
			refundReason().then(res => {
				this.resonArr = res.data
			})
		},
		methods: {
			// 修改退货数量
			numberChange(e,index) {
				this.data[index].product_num = e.number
			},
			// 理由选择弹窗
			chooseReson() {
				this.popup = true
				this.$refs.popup.open()
			},
			//选择退款理由
			radioChange(evt) {
				this.reson = evt.target.value
				this.$refs.popup.close()
				this.popup = false
			},
			// 关闭理由选择弹窗
			close() {
				this.popup = false
				this.$refs.popup.close()
			},
			// 图片上传返回
			result(e) {
				this.pics = e.imgArr
			},
			// 删除图片
			remove(e) {
				let index = e.index
			},
			// 同意协议
			ruleCheck() {
				this.ruleChecked = !this.ruleChecked
			},
			// 跳转协议详情
			goRule(id, name) {
				uni.navigateTo({
					url: `/pages/center/help/rulesDetail?id=${id}&tit=${name}`
				})
			},
			submit() {
				if (!this.ruleChecked) {
					return uni.showToast({
						icon:"none",
						title:"请阅读并同意《国家普惠社区退货规则》"
					})
				}
				if (!this.reson) {
					return uni.showToast({
						icon:"none",
						title:"请选择退款原因"
					})
				}
				if (!this.contactName) {
					return uni.showToast({
						icon:"none",
						title:"请填写退款联系人"
					})
				}
				if (!this.contactPhone) {
					return uni.showToast({
						icon:"none",
						title:"请填写退款联系方式"
					})
				}
				uni.showLoading({
					mask:true
				})
				let type = 0
				if(this.type == 1||this.type == 2) {
					type = 0
				} else if (this.type == 3) {
					type = 1
				}
				returnApply({
					oid:this.oid,
					type: type,
					real_name: this.contactName,
					user_phone: this.contactPhone,
					reason: this.reson,
					describe: this.resonDel,
					imgs: this.pics,
					data: this.data
				}).then(res => {
					uni.setStorageSync("refundRef",true)
					uni.redirectTo({
						url:"./refundStep?id=" + res.data.id + "&type=" + type
					})
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	
	.allRefund,.chooseRefund{
		border-top: 20rpx solid #eee;
	}
	// 标题
	.storeTitle {
		
		padding: 0 32rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		line-height: 50rpx;
		color: #333;

		image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
		}

		.title {
			margin-left: 15rpx;
			font-size: 28rpx;
		}

		.icon-you {
			margin-top: 4rpx;
			margin-left: 15rpx;
			font-size: 28rpx;
		}
	}

	.titleitem {
		border-bottom: 1rpx solid #eee;
		padding: 0 32rpx 30rpx;
		.items{
			border-bottom: 1rpx solid #f5f5f5;
			.item {
				margin-top: 30upx;
				height: 140upx;
				display: flex;
			
				.img {
					width: 140upx;
					height: 140upx;
					background: rgba(220, 220, 220, 1);
			
					image {
						width: 140upx;
						height: 140upx;
					}
				}
			
				.msg {
					width: 526rpx;
					height: 140upx;
					margin-left: 20upx;
			
					.clamp {
						height: 30upx;
						line-height: 30upx;
						font-size: 26upx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
					}
			
					.a {
						display: flex;
						height: 80upx;
						line-height: 80upx;
						justify-content: space-between;
						font-size: 20upx;
						color: #999;
					}
			
					.b {
						display: flex;
						height: 30upx;
						line-height: 30upx;
						justify-content: space-between;
			
						view {
							display: flex;
							justify-content: space-between;
			
							text:nth-of-type(1) {
								font-size: 14upx;
								font-weight: bold;
								color: #FB3737;
							}
			
							text:nth-of-type(2) {
								font-size: 24upx;
								font-weight: bold;
								color: #FB3737;
							}
						}
					}
				}
			}
		}
		
		.items:last-child{
			border: none;
		}
	}
	.info {
		border-bottom: 20rpx solid #eee;
		padding: 20rpx 0;
		.cellBox {
			padding: 10rpx 32rpx;
			
			.img-box-upload{
				margin-top: 20rpx;
			}
		}
		.notice{
			color: $mall-price;
			font-size: 20rpx;
		}
	}
	
	.cell{
		padding: 10rpx 0;
		font-size: 26rpx;
		color: rgba(51, 51, 51, 1);
		line-height: 60rpx;
		display: flex;
		align-items: center;
		position: relative;
		.tit {
			width: 160rpx;
		}
		.reson{
			line-height: 60rpx;
			height: 60rpx;
			flex: 1;
		}
		.yticon{
			position: absolute;
			right:0;
			font-weight:bold;
		}
		.resonDel{
			width: 100%;
			line-height: 40rpx;
			box-sizing: border-box;
			padding: 20rpx;
			border: 1rpx solid #eee;
			border-radius: 10rpx;
		}
		/deep/ .uni-numbox{
			width: auto!important;
			bottom: 20rpx!important;
		}
	}
	.btnWrapper{
		padding: 40rpx 32rpx 50rpx;
		padding: 40rpx 32rpx calc(50rpx + env(safe-area-inset-bottom));
		.rule {
			margin: 0 0 40rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		
			image {
				margin-right: 14rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;
			}
		
			.gray {
				margin-right: 14rpx;
				box-sizing: border-box;
				border: 2rpx #999 solid;
				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;
			}
		
			.text {
				font-size: 24rpx;
				color: #333;
		
				text:nth-of-type(2) {
					color: $mall-price;
				}
			}
		}
		.btn{
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 26rpx;
			color: #fff;
			background-color: $mall-price;
			border-radius: 35rpx;
		}
	}
	.sellerType {
		width: 542rpx;
		background-color: #fff;
		border-radius: 8rpx;
		padding: 0 30rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: relative;
		z-index: 999;
	
		.close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width: 24rpx;
			height: 24rpx;
		}
	
		.title {
			font-size: 34rpx;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
		.radioBox{
			max-height: 70vh;
			overflow-y: auto;
			.uni-list-cell {
				display: flex;
				justify-content: space-between;
				line-height: 100rpx;
				border-bottom: 1rpx solid #eee;
				
				view {
					text:nth-of-type(2) {
						color: #999;
						font-size: 24rpx;
						margin-left: 10rpx;
					}
				}
			}
				
			.uni-list-cell:nth-of-type(1) {
				border-bottom: 1rpx solid #f5f5f5;
			}
		}
	}
</style>
